<template>
  <div id="model">
      从Three.js角度来说，
      Threejs模型对象就是由Threejs几何体Geometry和Threejs材质Material构成，
      材质主要设置三维模型的颜色等外观样式，几何体主要是通过顶点坐标数据表达三维模型的外形形状。
      模型的区别就在于对几何体顶点的渲染方式不同。
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  name: 'model',
  data(){
      return{
      }
  },
  methods:{
      test_model(){
 let container = document.getElementById('model');
          let scene = new THREE.Scene();
          //球体几何对象
          let geometry = new THREE.BoxGeometry(100, 100, 100) 
        //   // 点渲染模式
        //   // 点模型就是将几何体的每一个顶点数据渲染为一个方形区域，方形区域的大小可以设置
        //   let material = new THREE.PointsMaterial({
        //     color: 0x0000ff, //颜色
        //     size: 5, //点渲染尺寸
        //    });
        //   //点模型对象, 参数：几何体  点材质
        // let point = new THREE.Points(geometry, material);
        //线渲染模式
        // // 线条渲染模式
        // let material = new THREE.LineBasicMaterial({
        //     color:0xff0000 //线条颜色
        // });//材质对象
        // // 创建线模型对象   构造函数：Line、LineLoop、LineSegments
        // var line=new THREE.LineSegments(geometry,material);//线条模型对象
        // 三角形面渲染模式  
        let material = new THREE.MeshLambertMaterial({
             color: 0x0000ff, //三角面颜色
            }); //材质对象
        let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中
        let axisHelper = new THREE.AxesHelper(250);
        scene.add(axisHelper); 
        //点光源
        let pointLight = new THREE.PointLight(0xffffff);
        //点光源位置
        pointLight.position.set(400, 200, 300); 
        //点光源添加到场景中
        scene.add(pointLight); 
        //环境光
        let ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        //相机系数设置
        //窗口宽度
        let width = container.clientWidth; 
        //窗口高度
        let height = container.clientHeight; 
        //窗口宽高比
        let k = width / height;
        //三维场景显示范围控制系数，系数越大，显示的范围越大 
        let s = 200; 
        //创建相机对象
        let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(250, 250, 250); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        //创建渲染器对象
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        container.appendChild(renderer.domElement); //插入canvas对象
        function render(){ 
            renderer.render(scene,camera); 
        }
        let controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
        controls.addEventListener('change', render);//监听鼠标、键盘事件 
      },
      test_model2(){
        let container = document.getElementById('model');
        let scene = new THREE.Scene();
          //球体几何对象
        let geometry = new THREE.BoxGeometry(100, 100, 100) 
        let material = new THREE.MeshLambertMaterial({
             color: 0x0000ff, //三角面颜色
            }); //材质对象
        let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        mesh.scale.set(0.5, 1.5, 2)
        scene.add(mesh); //网格模型添加到场景中
        let axisHelper = new THREE.AxesHelper(250);
        scene.add(axisHelper); 
        //点光源
        let pointLight = new THREE.PointLight(0xffffff);
        //点光源位置
        pointLight.position.set(400, 200, 300); 
        //点光源添加到场景中
        scene.add(pointLight); 
        //环境光
        let ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        //相机系数设置
        //窗口宽度
        let width = container.clientWidth; 
        //窗口高度
        let height = container.clientHeight; 
        //窗口宽高比
        let k = width / height;
        //三维场景显示范围控制系数，系数越大，显示的范围越大 
        let s = 200; 
        //创建相机对象
        let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(250, 250, 250); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        //创建渲染器对象
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        container.appendChild(renderer.domElement); //插入canvas对象
        function render(){ 
            renderer.render(scene,camera); 
        }
        let controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
        controls.addEventListener('change', render);//监听鼠标、键盘事件 
      }
  }, 
  mounted () {
      //点模型，线性模型，网格模型使用
      //this.test_model();
      //模型的旋转，平移，缩放，变换
      this.test_model2();
 }
}
</script>

<style scope>
#model{
     height: 500px;
}
</style>